<template>
  <div style="margin: auto"><h1>采购信息</h1></div>

  <el-table
      :data="cutObj.records"
      height="250"
      border
      style="width: 100%">
    <el-table-column
        prop="supplier.name"
        label="供货商名称"
        width="300">
    </el-table-column>
    <el-table-column
        prop="user"
        label="采购员"
        width="200">
    </el-table-column>
    <el-table-column
        prop="date"
        label="采购时间"
        width="300">
    </el-table-column>
    <el-table-column
        label="操作"
        width="200">
      <template #default="scope">
        <el-button type="primary" size="small" @click="findById(scope.row.id);this.findDiv=true">查看详情</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      v-model:currentpage="cutObj.current"
      v-model:page-size="cutObj.size"
      background
      layout="prev, pager, next,jumper"
      :total="cutObj.total"
      @current-change="findByItem">
  </el-pagination>

  <div class="searchDiv">
    <el-row>
      <el-col :span="10">供货商名称<input type="text" v-model="findObj.name"></el-col>
    </el-row>
    <el-row>
      <el-col :span="10" style="margin-top: 20px">起始时间<input type="date" v-model="findObj.startDate"></el-col>
    </el-row>
    <el-row>
      <el-col :span="10" style="margin-top: 20px">结束时间<input type="date" v-model="findObj.endDate"></el-col>
    </el-row>
    <el-row>
      <el-col :span="8" style="margin-top: 20px">
        <el-button type="primary" @click="findByItem(1)">搜索</el-button>
      </el-col>
    </el-row>
  </div>


  <el-dialog
      v-model="findDiv"
      title="采购信息详情"
      width="60%"
      center>
<!--    <h3>采购信息详情</h3>-->
<!--    <div style="margin-left: 100px;margin-top: 20px">供货商名称:<span-->
<!--        style="margin-left: 30px;margin-right: 50px">{{ supplier.name }}</span>-->
<!--      采购员:<span style="margin-left: 30px">{{ user }}</span></div>-->
<!--    <div style="margin-left: 100px;margin-top: 20px">采购时间:<span style="margin-left: 50px">{{ date }}</span></div>-->
<!--    <div style="margin-top: 40px"><span>采购物品明细</span></div>-->
    <el-table
        :data="listObj"
        height="250"
        border
        style="width: 100%">
      <el-table-column
          prop="product.name"
          label="商品名称"
          width="200">
      </el-table-column>
      <el-table-column
          prop="product.brand"
          label="品牌"
          width="200">
      </el-table-column>
      <el-table-column
          prop="buyMoney"
          label="采购价格"
          width="130">
      </el-table-column>
      <el-table-column
          prop="num"
          label="采购数量"
          width="100">
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="this.findDiv=false" style="margin-top: 30px;margin-left: 100px;size: 20px">确定
    </el-button>
  </el-dialog>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      cutObj: [],
      findObj: {},
      findDiv: false,
      buyer: {},
      buyerBean: [],
      supplier: {},
      findCarBean: [],
      infoObj: [],
      listObj: [],
    }
  },
  methods: {
    findByItem(pageNo) {
      this.findObj.pageNo = pageNo;
      axios.get("/project/buyer/findByItem", {params: this.findObj}).then(resp => {
        this.cutObj = resp.data;
      })
      console.log(this.cutObj);
    },
    findById(id) {
      axios.get("/project/buyer/findById", {params: {id}}).then(resp => {
        this.findCarBean = resp.data;
        this.infoObj = this.findCarBean.supplier;
        this.listObj = this.findCarBean.product;
      })
      console.log(this.listObj);
      // console.log(this.supplier)
    },
    findByUserId(userId) {
      axios.get("/project/buyerCar/findByUserId", {
        params: {
          userId
        }
      }).then(resp => {
        this.shop = resp.data;
        console.log(this.shop);
      })
    }
  },
  created() {
    this.findByItem(1)
  }
}
</script>

<style scoped>
.searchDiv {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  margin-left: 700px;
  margin-top: 40px;
}

</style>